<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let与var的区别</title>
    <script>
        function f1(){
            // var的变量名可以重复
            var num = 1;
            console.log(num)
            var num = "admin";
            console.log(num)

            // let变量名不能重复
            let name = "admin";
            console.log(name);
            // let name = 1;
            console.log(name);
        }
        function f2(){
            // var不存在作用域
            for(var i = 0; i < 10; i++){

            }
            // 由于i是在for循环中定义的
            // 因此,在for循环外面的i出了作用域
            // 通过var定义的变量,在外面是可用的
            // 因此,var不存在作用域
            console.log(i);

            // let存在作用域
            for(let j = 0; j < 10; j++){

            }
            // 此时的j也出了作用域,但是用于j是通过let声明的
            // let存在作用域,因此,报错 j is not defined
            console.log(j)
        }
        function f3(){
            // var存在变量提升
            // 使用var定义的变量存在变量提升
            // 变量提升:将变量的声明提升到函数的最先位置
            // console.log(a);
            // var a = 1;
            // 相当于下面写法
            // 此时在打印之前,声明了变量a
            // 因此,不会报错,只是结果是undefined
            // var a;
            // console.log(a);
            // a = 1;

            // let不存在变量提升
            // 因此,在打印b的时候,b不存在
            // 报错
            console.log(b);
            let b = 1;

        }
    </script>
</head>
<body>
<button onclick="f1()">变量名区别</button><br>
<button onclick="f2()">作用域区别</button><br>
<button onclick="f3()">变量提升区别</button><br>
</body>
</html>